<template>
  <div style="margin-left: -30px">
    <b style="color: #fff; font-size: 18px">港口近七日上链量统计</b>
    <canvas
      id="echart1"
      width="600px"
      height="400px"
      style="transform: scale(0.85)"
    ></canvas>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "echart1",
  mounted() {
    var chartDom = document.getElementById("echart1");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
            width: 2,
            type: "solid",
          },
        },
      },
      legend: {
        data: ["DQ", "TY", "SS", "QG", "SY", "DD"],
      },
      singleAxis: {
        top: 50,
        bottom: 50,
        axisTick: {},
        axisLabel: {},
        type: "time",
        axisPointer: {
          animation: true,
          label: {
            show: true,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
            type: "dashed",
            opacity: 0.2,
          },
        },
      },
      series: [
        {
          type: "themeRiver",
          emphasis: {
            itemStyle: {
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.8)",
            },
          },
          data: [
            ["2021/11/08", 10, "DQ"],
            ["2021/11/09", 15, "DQ"],
            ["2021/11/10", 35, "DQ"],
            ["2021/11/11", 38, "DQ"],
            ["2021/11/12", 22, "DQ"],
            ["2021/11/13", 16, "DQ"],
            ["2021/11/14", 7, "DQ"],
            ["2021/11/15", 2, "DQ"],
            ["2021/11/16", 17, "DQ"],
            ["2021/11/17", 33, "DQ"],
            ["2021/11/18", 40, "DQ"],
            ["2021/11/19", 32, "DQ"],
            ["2021/11/20", 26, "DQ"],
            ["2021/11/21", 35, "DQ"],
            ["2021/11/22", 40, "DQ"],
            ["2021/11/23", 32, "DQ"],
            ["2021/11/24", 26, "DQ"],
            ["2021/11/25", 22, "DQ"],
            ["2021/11/26", 16, "DQ"],
            ["2021/11/27", 22, "DQ"],
            ["2021/11/28", 10, "DQ"],
            ["2021/11/08", 35, "TY"],
            ["2021/11/09", 36, "TY"],
            ["2021/11/10", 37, "TY"],
            ["2021/11/11", 22, "TY"],
            ["2021/11/12", 24, "TY"],
            ["2021/11/13", 26, "TY"],
            ["2021/11/14", 34, "TY"],
            ["2021/11/15", 21, "TY"],
            ["2021/11/16", 18, "TY"],
            ["2021/11/17", 45, "TY"],
            ["2021/11/18", 32, "TY"],
            ["2021/11/19", 35, "TY"],
            ["2021/11/20", 30, "TY"],
            ["2021/11/21", 28, "TY"],
            ["2021/11/22", 27, "TY"],
            ["2021/11/23", 26, "TY"],
            ["2021/11/24", 15, "TY"],
            ["2021/11/25", 30, "TY"],
            ["2021/11/26", 35, "TY"],
            ["2021/11/27", 42, "TY"],
            ["2021/11/28", 42, "TY"],
            ["2021/11/08", 21, "SS"],
            ["2021/11/09", 25, "SS"],
            ["2021/11/10", 27, "SS"],
            ["2021/11/11", 23, "SS"],
            ["2021/11/12", 24, "SS"],
            ["2021/11/13", 21, "SS"],
            ["2021/11/14", 35, "SS"],
            ["2021/11/15", 39, "SS"],
            ["2021/11/16", 40, "SS"],
            ["2021/11/17", 36, "SS"],
            ["2021/11/18", 33, "SS"],
            ["2021/11/19", 43, "SS"],
            ["2021/11/20", 40, "SS"],
            ["2021/11/21", 34, "SS"],
            ["2021/11/22", 28, "SS"],
            ["2021/11/23", 26, "SS"],
            ["2021/11/24", 37, "SS"],
            ["2021/11/25", 41, "SS"],
            ["2021/11/26", 46, "SS"],
            ["2021/11/27", 47, "SS"],
            ["2021/11/28", 41, "SS"],
            ["2021/11/08", 10, "QG"],
            ["2021/11/09", 15, "QG"],
            ["2021/11/10", 35, "QG"],
            ["2021/11/11", 38, "QG"],
            ["2021/11/12", 22, "QG"],
            ["2021/11/13", 16, "QG"],
            ["2021/11/14", 7, "QG"],
            ["2021/11/15", 2, "QG"],
            ["2021/11/16", 17, "QG"],
            ["2021/11/17", 33, "QG"],
            ["2021/11/18", 40, "QG"],
            ["2021/11/19", 32, "QG"],
            ["2021/11/20", 26, "QG"],
            ["2021/11/21", 35, "QG"],
            ["2021/11/22", 40, "QG"],
            ["2021/11/23", 32, "QG"],
            ["2021/11/24", 26, "QG"],
            ["2021/11/25", 22, "QG"],
            ["2021/11/26", 16, "QG"],
            ["2021/11/27", 22, "QG"],
            ["2021/11/28", 10, "QG"],
            ["2021/11/08", 10, "SY"],
            ["2021/11/09", 15, "SY"],
            ["2021/11/10", 35, "SY"],
            ["2021/11/11", 38, "SY"],
            ["2021/11/12", 22, "SY"],
            ["2021/11/13", 16, "SY"],
            ["2021/11/14", 7, "SY"],
            ["2021/11/15", 2, "SY"],
            ["2021/11/16", 17, "SY"],
            ["2021/11/17", 33, "SY"],
            ["2021/11/18", 40, "SY"],
            ["2021/11/19", 32, "SY"],
            ["2021/11/20", 26, "SY"],
            ["2021/11/21", 35, "SY"],
            ["2021/11/22", 4, "SY"],
            ["2021/11/23", 32, "SY"],
            ["2021/11/24", 26, "SY"],
            ["2021/11/25", 22, "SY"],
            ["2021/11/26", 16, "SY"],
            ["2021/11/27", 22, "SY"],
            ["2021/11/28", 10, "SY"],
            ["2021/11/08", 10, "DD"],
            ["2021/11/09", 15, "DD"],
            ["2021/11/10", 35, "DD"],
            ["2021/11/11", 38, "DD"],
            ["2021/11/12", 22, "DD"],
            ["2021/11/13", 16, "DD"],
            ["2021/11/14", 7, "DD"],
            ["2021/11/15", 2, "DD"],
            ["2021/11/16", 17, "DD"],
            ["2021/11/17", 33, "DD"],
            ["2021/11/18", 4, "DD"],
            ["2021/11/19", 32, "DD"],
            ["2021/11/20", 26, "DD"],
            ["2021/11/21", 35, "DD"],
            ["2021/11/22", 40, "DD"],
            ["2021/11/23", 32, "DD"],
            ["2021/11/24", 26, "DD"],
            ["2021/11/25", 22, "DD"],
            ["2021/11/26", 16, "DD"],
            ["2021/11/27", 22, "DD"],
            ["2021/11/28", 10, "DD"],
          ],
        },
      ],
    };
    option && myChart.setOption(option);
  },
};
</script>

<style>
</style>